<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			#div1 {
				width: 850px;
				height: 500px;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}

			#div1 ul {
				position: absolute;
				left: 0;
				top: 0;
			}

			#div1 ul li {
				height: 500px;
				float: left;
			}

			#div1 ol {
				position: absolute;
				right: 10%;
				bottom: 10px;
				z-index: 6
			}

			#div1 ol li {
				width: 20px;
				height: 20px;
				background: #fff;
				margin-left: 5px;
				float: left;
				line-height: 20px;
				text-align: center;
			}

			#div1 ol li.ac {
				background: red;
				color: #fff;
			}

			#div1>a {
				text-decoration: none;
				position: absolute;
				top: 50%;
				margin-top: -10px;
				height: 40px;
				line-height: 32px;
				text-align: center;
				width: 40px;
				font-size: 40px;
				vertical-align: middle;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				z-index: 6;
			}

			#div1 .goPrev {
				left: 0;
			}

			#div1 .goNext {
				right: 0;
			}

			img {
				width: 850px;
				height: 500px;
			}
		</style>
	</head>
	<script src="./jquery-3.5.1.min.js"></script>
	<body>
		<div id="div1">
			<ul>
				<li><img src="./1.jpg" /></li>
				<li><img src="./2.jpg" /></li>
				<li><img src="./3.jpg" /></li>
				<li><img src="./4.jpg" /></li>
				<li><img src="./5.jpg" /></li>
			</ul>
			<ol>
			</ol>
			<a href="javascript:;" class="goPrev">&laquo;</a>
			<a href="javascript:;" class="goNext">&raquo;</a>
		</div>
		<script>
			class Carousel {
				constructor() {
					this.$ul = $('#div1 ul')
					this.$imgs = $('#div1 ul li')
					this.$ol = $('#div1 ol')
					this.$goPrev = $('#div1 .goPrev')
					this.$goNext = $('#div1 .goNext')

					this.len = this.$imgs.length
					this.width = this.$imgs.outerWidth()
					this.index = 0 // 当前索引
					this.lastIndex = 0 // 上一次的索引

					this.init()
					this.btnClick()
					this.nextClick()
					this.prevClick()
					// this.auto()
					this.$flag1 = true;
					this.$flag2 = true;
				}

				init() {
					this.$imgs.eq(0).clone().appendTo(this.$ul) /* 最后增加第一张图片 */
					this.$ul.width((this.len + 1) * this.width) /* 计算增加一张图后ul的宽度 */
					for (var i = 0; i < this.len; i++) {
						$('<li>').html(i + 1).addClass(i === 0 ? 'ac' : '').appendTo(this.$ol) /* ？？？ */
					}
				}

				btnClick() {
					const _this = this
					// 按钮点击事件
					this.$btns = this.$ol.children()
					this.$btns.on('click', function() {
						_this.lastIndex = _this.index // 先把当前值变为上一次的值
						_this.index = $(this).index() // 才能前进一步给index赋新的值

						_this.$btns.eq(_this.lastIndex).removeClass('ac')
						_this.$btns.eq(_this.index).addClass('ac')
						_this.$ul.animate({
							left: -_this.index * _this.width
						})
					})
				}

				nextClick() {
					this.$goNext.on('click', () => {
						if (this.$flag1) { /* 开关 */
							this.$flag1 = false
							this.lastIndex = this.index
							this.index++
							if (this.index === this.len) {
								// 超出范围
								this.index = 0
								this.$ul.animate({
									left: -this.len * this.width /* 指定过渡时间??? */
								}, () => {
									this.$ul.css('left', 0) /* 跳转到第一张 */
								})
								this.$flag1 = true
							} else {
								this.$ul.animate({
									left: -this.index * this.width
								})
								this.$flag1 = true
							}

						}
						// if else都是一样的切换按钮
						this.$btns.eq(this.lastIndex).removeClass('ac')
						this.$btns.eq(this.index).addClass('ac')
					})
				}
				prevClick() { /* if条件放外面，点击没反应？？？ */
					this.$goPrev.on('click', () => {
						if (this.$flag2) {
							this.$flag2 = false
							this.lastIndex = this.index
							console.log(this.index)
							if (this.index <= 0) { /* 先判断是否为第一张 */
								// 超出范围
								this.$ul.css('left', -5 * this.width) /* 跳转到最后一张 */
								this.index = this.len - 1
								console.log(this.index + '===')
								this.$ul.animate({
									left: -4 * this.width
								},1000)
								this.$flag2 = true		/* 不正常？？ */
							} else {
								this.index-- /* 不为第一张时index才先减 */
								this.$ul.animate({
									left: -(this.index) * this.width
								},1000)
								this.$flag2 = true
							}
							// if else都是一样的切换按钮
							this.$btns.eq(this.lastIndex).removeClass('ac')
							this.$btns.eq(this.index).addClass('ac')
						}
					})
				}
				// play() {
				// 	this.timer = setInterval(() => {
				// 		this.$goNext.trigger('click')
				// 	}, 2000)
				// }
				// auto() {
				// 	this.play()
				// 	this.$ul.hover(() => {
				// 		clearInterval(this.timer)
				// 	}, () => {
				// 		this.play() /* ??? */
				// 	})
				// }
			}
			new Carousel()
		</script>
	</body>
</html>
